<!-- 3: 实现青鸟官网注册 http://i.bdqn.cn/reg
    只需要实现注册部分，其他部分不管（注意，那几个图片最好作为背景）
    素材看附件 《作业3-青鸟注册》 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业3-青鸟注册</title>
		<style>
			body{
				background-image: url(reg-mobile.jpg);
				background-repeat: no-repeat;
				/* background-size: 100%; */
			}
			form{
				text-align: left;
				text-indent: 10%;
				background-color: white;
				position: absolute;
				left: 20%;
				right: 20%;
			}
			.c1{
				color: darkgray;
				font-size: 30%;
			}
			.a1{
				background: url(reg-error.png) no-repeat;
				background-position: left;
				background-origin: content-box;
				text-indent: 30px;
			}
			.a2{
				background: url(login-input4.png) no-repeat;
				background-position: left;
				background-origin: content-box;
				text-indent: 30px;
			}
			.a3{
				background: url(login-input2.png) no-repeat;
				background-position: left;
				background-origin: content-box;
				text-indent: 30px;
			}
			.a4{
				background: url(login-input2.png) no-repeat;
				background-position: left;
				background-origin: content-box;
				text-indent: 30px;
			}
			.a5{
				background: url(login-input3.png) no-repeat;
				background-position: left;
				background-origin: content-box;
				text-indent: 30px;
			}
			input::-webkit-input-placeholder{
				color: darkgray;
				font-size: 50%;
			}
		</style>
	</head>
	<body>
		<form action="0"  method="GET">
			<p>
				<h3 style="color: blue;text-indent: 30%;">邮箱注册</h3>
			</p>
			<p>
				<input required class="a1" placeholder="请输入您的常用邮箱" type="text" name="email"/><a class="c1">请输入您的常用邮箱</a>
			</p>
			<p>
				<input required class="a2" placeholder="请输入昵称" type="text" name="uname" maxlength="12" value=""/><a class="c1">4-12位字符、英文、数字或者中文均可</a>
			</p>
			<p>
				<input required class="a3" placeholder="请输入密码" type="password" name="key" maxlength="16" /><a class="c1">6-16位字符或者数字、字母、区分大小写</a>
			</p>
			<p>
				<input required class="a4" placeholder="请再次输入密码" type="password" name="key" maxlength="16" />
			</p>
			<p>
				<input required class="a5" placeholder="请输入右侧验证码" type="text" name="yzm" maxlength="4"/><a class="c1">不区分大小写，点击图片可更换</a>
			</p>
			<p>
				<input type="checkbox" name="qq" value="同意" checked/>同意<a href="www.baidu.com">用户服务条款</a>
			</p>
			<p>
				<input type="submit" value='注册' style="color:white; border: none; background-color: skyblue; width:150px; height:30px;">
			</p>
		</form>
	</body>
</html>